<template>
  <jxtech-attachment-dialog
    v-model:dialog-visible="documentDialogVisible"
    :width="width"
    :tips="tips"
    :busi-id="busiId"
    :comp-id="compId"
    :item-type="itemType"
    :projectid="projectid"
    :ip="ip"
    :source-ip="sourceIp"
    :error-image="errorImage"
    :load-data="JxtechAttachmentDialogExtState.loadData"
    :query-file-handler="JxtechAttachmentDialogExtState.queryFileHandler"
    :save-update-file-handler="JxtechAttachmentDialogExtState.saveUpdateFileHandler"
    :query-folder-handler="JxtechAttachmentDialogExtState.queryFolderHandler"
    :save-update-folder-handler="JxtechAttachmentDialogExtState.saveUpdateFolderHandler"
    :delete-file="JxtechAttachmentDialogExtState.deleteFile"
    :download-file="JxtechAttachmentDialogExtState.downloadFile"
    :upload-method="JxtechAttachmentDialogExtState.uploadMethod"
    :save-mulit-files="JxtechAttachmentDialogExtState.saveMulitFiles"
    :insert-folder="JxtechAttachmentDialogExtState.insertFolder"
    :download-file-url="JxtechAttachmentDialogExtState.downloadFileUrl"
    :access-token="JxtechAttachmentDialogExtState.accessToken"
  ></jxtech-attachment-dialog>
</template>

<script setup lang="ts" name="JxtechAttachmentDialogExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
/**组件 */
import { JxtechAttachmentDialog } from "@whjxtech/jxtech-component";
/**类型 */
import type {
  AttachmentQueryParm,
  FileAttachmentQueryParm,
  FolderAttachmentQueryParm,
  DeleteFileParam,
  SaveUploadFile,
  InsertFolderParm,
  uploadQueryParams
} from "@whjxtech/jxtech-component";
import {
  saveUploadFileUrl,
  downloadFileUrl,
  downloadFile,
  uploadFile,
  ExportFilesQueryExtServiceApi,
  ExportFileAttachmentServiceApi,
  ExportFileTypeServiceApi,
  ExportFilesServiceApi
} from "@/api/modules/org/file-attachment";
import { getAccessToken } from "@/utils/common";
import { uploadMinoFile } from "@/api/modules/system/upload-file";
import { downloadMinioFile, downloadMInioFileUrl, MinioAttachmentBean, saveMulitFiles } from "@/api/modules/system/minio";
import errorImage from "@/assets/images/404.png";
import { UploadModeType } from "@/config/upload";
import { SYSTEM_CONFIG } from "@/config/system";

interface JxtechAttachmentDialogExtProps {
  dialogVisible?: boolean;
  width?: string;
  tips?: string;
  /**业务id */
  busiId: string;
  /**组件id */
  compId: string;
  /**业务类型 */
  itemType: string;
  /**电站id/项目id 可以不传但是建议传 */
  projectid?: string | number;
  /**预览ip端口 */
  ip?: string;
  /**来源ip */
  sourceIp?: string;
  /**上传模式 */
  uploadMode?: UploadModeType;
}

const emit = defineEmits<{
  (e: "update:dialogVisible", val: Boolean): void;
}>();

const props = withDefaults(defineProps<JxtechAttachmentDialogExtProps>(), {
  dialogVisible: false,
  width: "1400px",
  tips: "附件管理",
  projectid: "1",
  uploadMode: SYSTEM_CONFIG.UPLOAD_MODE
});

const MinioUploadState = reactive({
  downloadFileUrl: downloadMInioFileUrl,
  uploadMethod: (file: File, setProgress: Function) => {
    return uploadMinoFile(file, setProgress);
  },
  saveMulitFiles: (attachment: MinioAttachmentBean, typeid: string | number) => {
    return saveMulitFiles(
      attachment.attachmentId,
      props.compId,
      props.itemType,
      props.busiId,
      props.projectid,
      attachment.originalName,
      attachment.fileExt,
      attachment.mimeType,
      attachment.fileSize,
      typeid
    );
  },
  downloadFile: (fileId: string) => {
    return downloadMinioFile(fileId);
  }
});

const JxudpUploadState = reactive({
  downloadFileUrl: downloadFileUrl,
  uploadMethod: (file: File, setProgress: Function, params: any) => {
    const formData = new FormData();
    formData.append("busiId", params.busiId);
    formData.append("compId", params.compId);
    formData.append("itemType", params.itemType);
    formData.append("projectid", params.projectid);
    formData.append("typeid", params.typeid);
    formData.append("files", file as File);
    return uploadFile(formData, setProgress, file.size);
  },
  saveMulitFiles: (attachment: FileAttachmentQueryParm[], typeid: string | number) => {
    let params: SaveUploadFile[] = [];
    attachment.forEach((item: { fileId: any }) => {
      let bean: SaveUploadFile = {
        businessid: props.busiId,
        businesstype: props.itemType,
        filecategory: props.compId,
        projectid: props.projectid,
        typeid: typeid,
        uuid: item.fileId
      };
      params.push(bean);
    });
    return ExportFilesServiceApi.attachmentSaveMulitFiles({ insert: params });
  },
  downloadFile: (fileId: string) => {
    return downloadFile(fileId);
  }
});

//双向绑定
const documentDialogVisible = ref(props.dialogVisible);
watch(
  () => props.dialogVisible,
  val => {
    documentDialogVisible.value = val;
  }
);
watch(documentDialogVisible, val => {
  documentDialogVisible.value = val;
  emit("update:dialogVisible", val);
});

const JxtechAttachmentDialogExtState = reactive({
  /**token */
  accessToken: getAccessToken() || "",
  /**查询全部附件 */
  loadData: (queryParams: AttachmentQueryParm) => {
    return ExportFilesQueryExtServiceApi.attachmentLoadData(queryParams);
  },
  /**查询附件详情 */
  queryFileHandler: (id: string) => {
    return ExportFileAttachmentServiceApi.attachmentQueryFileHandler({ pk: id });
  },
  /**修改保存文件 */
  saveUpdateFileHandler: (fileQueryParm: FileAttachmentQueryParm) => {
    return ExportFileAttachmentServiceApi.attachmentSaveUpdateFileHandler(fileQueryParm);
  },
  /**查询文件夹详情 */
  queryFolderHandler: (id: string) => {
    return ExportFileTypeServiceApi.attachmentQueryFolderHandler({ pk: id });
  },
  /**修改保存文件夹 */
  saveUpdateFolderHandler: (folderQueryParm: FolderAttachmentQueryParm) => {
    return ExportFileTypeServiceApi.attachmentSaveUpdateFolderHandler(folderQueryParm);
  },
  /**删除文件方法 */
  deleteFile: (deleteFileParamArray: DeleteFileParam[]) => {
    return ExportFilesServiceApi.attachmentDeleteFile(deleteFileParamArray);
  },
  /**新建文件夹方法 */
  insertFolder: (bean: InsertFolderParm) => {
    return ExportFileTypeServiceApi.attachmentInsertFolder(bean);
  },
  /**以下是切换后端存储服务方式 需要替换的内容 */
  /**查看图片的url */
  downloadFileUrl: props.uploadMode == "server" ? JxudpUploadState.downloadFileUrl : MinioUploadState.downloadFileUrl,
  /**上传文件方法 */
  uploadMethod: (file: File, setProgress: Function, queryParams: uploadQueryParams) => {
    if (props.uploadMode == "server") return JxudpUploadState.uploadMethod(file, setProgress, queryParams);
    else return MinioUploadState.uploadMethod(file, setProgress);
  },
  /**下载文件方法 */
  downloadFile: (fileId: string) => {
    if (props.uploadMode == "server") return JxudpUploadState.downloadFile(fileId);
    else return MinioUploadState.downloadFile(fileId);
  },
  /**保存附件方法 */
  saveMulitFiles: (data: any, typeid: string | number) => {
    if (props.uploadMode == "server") return JxudpUploadState.saveMulitFiles(data, typeid);
    else return MinioUploadState.saveMulitFiles(data, typeid);
  }
});
</script>

<style lang="scss" scoped></style>
